/**
 * Created by chocolate on 16/5/11.
 */
import React, {
    Component,
    StyleSheet,
    Text,
    TextInput,
    View,
    TouchableOpacity,
    Image,
    Alert,
} from 'react-native';

import Picker from 'react-native-picker';  //import...from...与require的区别在于哪里?
var CheckBox = require('react-native-checkbox');
var Title = require('./Title');
var bindQuery = require('./Query').query;

class Binding extends Component {
    constructor(props){
        super(props);
        this.state={checkBoxStatus:true,
                    phone:this.props.phone,     //手机号码是由注册界面或者用户界面传递过来
                    name:'',
                    childname:'',
                    bbid:'',
                    relation: '请选择与小孩关系'};

    }

    onReturn(){
        this.props.navigator.pop();
    }


    onPickOne(){
        this.setState({
            ...this.state,
            relation:this.picker.pickedValue[0]});
    }

    onHandleRelation(){
        this.refs.relation.blur(); //为了隐藏软键盘
        this.picker.toggle();
    }

    _onPressBind(){
        if(this.state.name === '')
        {
            Alert.alert('提示', '请填写家长姓名');
        }
        else if(this.state.childname === '')
        {
            Alert.alert('提示', '请填写小孩姓名');
        }
        else if(this.state.bbid === '')
        {
            Alert.alert('提示', '请填写BB卡号');
        }
        else
        {
            bindQuery.bindBbCard(this.state.phone,this.state.name,this.state.childname,this.state.bbid,0,this,function(owner,response){
                console.log(response);
                if(owner)
                {
                    owner.setState({isLoading:false});
                    if(response.success !== true ){
                        Alert.alert("错误",response.error);
                    }
                    else{
                        Alert.alert('提示', 
                                    '绑定成功!您可以继续绑定其他BB卡号',
                                    [{text:'OK',onPress:owner.props.onChildChange}]);
                    }
                }
            })
        }
    }

    render() {
        var usrIcon = require('../../icon/avatar.png');
        var childIcon = require('../../icon/boy-smiling.png');
        var cardIcon = require('../../icon/id-card.png');
        var relationIcon = require('../../icon/men-couple.png');
        return (
            <View style={styles.container}>
                <Title title={{left:"返回",center:"绑定学生信息",leftAct:this.onReturn.bind(this)}}></Title>
                <View style={styles.itemContainer}>
                    <View style = {[styles.flowRight,styles.bottomLine]}>
                        <Image style={styles.bindingIcon} source={usrIcon}/>
                        <TextInput style = {styles.registerInput}
                                   placeholder = "请正确输入家长姓名,以便与学生绑定"
                                   onChangeText = {(text)=>{this.setState({name:text})}}
                        />
                    </View>
                    <View style = {[styles.flowRight,styles.bottomLine]}>
                        <Image style={styles.bindingIcon} source={childIcon}/>
                        <TextInput style = {styles.registerInput}
                                   placeholder = "请正确输入小孩姓名,以便系统核实"
                                   onChangeText = {(text)=>{this.setState({childname:text})}}
                        />
                    </View>
                    <View style = {[styles.flowRight,styles.bottomLine]}>
                        <Image style={styles.bindingIcon} source={cardIcon}/>
                        <TextInput style = {styles.registerInput}
                                   placeholder = "请输入抱抱卡号"
                                   keyboardType = 'numeric'
                                   onChangeText = {(text)=>{this.setState({bbid:text})}}
                        />
                    </View>
                    <View style = {[styles.flowRight,styles.bottomLine]}>
                        <Image style={styles.bindingIcon} source={relationIcon}/>
                        <TextInput style = {styles.registerInput}
                                   ref="relation"
                                   placeholder = "请选择与小孩关系"
                                   value={this.state.relation}
                                   onFocus={this.onHandleRelation.bind(this)}
                        />
                    </View>

                    <View style = {styles.flowRight}>
                        <TouchableOpacity style={styles.button} onPress={this._onPressBind.bind(this)}>
                            <Text style={styles.buttonText}>绑定</Text>
                        </TouchableOpacity>
                    </View>

                   

                </View>
                <Picker
                    ref={picker => this.picker = picker}
                    showDuration={300}
                    showMask={false}
                    pickerData={["爸爸","妈妈","爷爷","奶奶","外公","外婆","其他"]}//picker`s value List
                    selectedValue={this.state.relation}//default to be selected value
                    pickerBtnText="确认"
                    pickerCancelBtnText="取消"
                    style={{height:50,backgroundColor:"#FFF"}}
                    onPickerDone={this.onPickOne.bind(this)}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        backgroundColor:'#fff',
    },
    itemContainer:{
        flexDirection:'column',
        alignItems:'center',
        paddingLeft:50,
        paddingRight:50,
    },
    flowRight:{
        //width:200,
        alignSelf:'stretch',
        flexDirection: 'row', //水平排布
        alignItems: 'center', //中心线对齐
        marginTop:30,
    },
    bottomLine:{
        borderBottomWidth:1,
        borderBottomColor:'#bbbbbb',
    },

    bindingIcon:{
        width:20,
        height:20,
        marginLeft:10,
        marginRight:10,
    },

    registerInput:{
        flex: 1,
        fontSize:14,
        height:30,
        color:'#bbbbbb',
    },
    button:{
        flex:1,
        height:30,
        borderRadius:6,
        borderWidth:1,
        borderColor:'#66C2FF',
        justifyContent:'center', //内容垂直方向居中
    },
    littleInput:{
        flex:2,
    },
    littleButton:{
        marginLeft:20,
        flex:1,
    },
    buttonText:{
        fontSize:14,
        textAlign:'center', //内容水平方向居中
        color:'#66C2FF'
    },
    descriptionBox:{
        alignSelf:'stretch',
        height:  50,
        marginTop:10,
    },

    descriptionText:{
        fontSize:12,
        color:'#bbbbbb',
    },
});

module.exports = Binding;
